<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 65%;
            height: 550px;
            border: 1px solid red;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .box .left {
            width: 65%;
            height: 100%;
            /* background-color: pink; */
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /* border: 1px solid gray; */

        }

        .box .right {
            width: 32%;
            height: 100%;
            border: 1px solid gray;

        }

        .box .left figure {
            width: 23%;
            height: 275px;
            border: 1px solid gray;

        }

        .box .left figure .tupian {
            width: 100%;
            height: 70%;
            background-color: rgb(206, 205, 205);
        }

        .box .left figure .bottom {
            padding: 10px;
        }
        .box .right h2{
            height: 10%;
        }
        .box .right .cart{
            height: 90%;
            width: 100%;
            overflow: auto;
        }
        .box .right p {
            display: flex;
            border: 1px solid red;
            justify-content: space-evenly;
        }

        .box .right p .xinxi {
            /* width: 20%; */
            line-height: 100px;

            height: 100px;
            text-align: center;
            /* line-height: 100px; */

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">


        </div>
        <div class="right">
            <h2>购物车</h2>
            <div class="cart"></div>
            
        </div>
    </div>
</body>

</html>
<script>
    var arr = [
        { id: '高级办公椅', price: '10000', btn: '加入购物车' },
        { id: '高级按摩椅', price: '1000', btn: '加入购物车' },
        { id: '高级电动按摩椅', price: '100', btn: '加入购物车' },
        { id: '电动按摩椅', price: '10', btn: '加入购物车' },
        { id: '老板椅', price: '20000', btn: '加入购物车' },
        { id: '办公桌', price: '50000', btn: '加入购物车' },
        { id: '可升降办公椅', price: '2000', btn: '加入购物车' },
        { id: '可升降办公桌', price: '5000', btn: '加入购物车' }
    ]
    var left = document.querySelector('.left')

    // 商品
    var str = ``
    // 购物车
    var str2 = ``
    // 将商品渲染到页面
    for (i = 0; i < arr.length; i++) {
        str += `
        <figure>
            <div class="tupian"></div>
            <figcaption>
                <div class="bottom">
                    <p>${arr[i].id}</p>
                    <p>${arr[i].price}</p>
                    <button>${arr[i].btn}</button>
                </div>
            </figcaption>
        </figure>
        `
    }
    left.innerHTML = str
    // var btns = document.querySelectorAll('button')
    // console.log(btns);
    // 将购物车渲染到页面
    count = 0
    left.onclick = function (e) {
        var Cart = document.querySelector('.cart')
        
        if (e.target.tagName == 'BUTTON') {
            if (index) {
                
            }
            count++
            var btns = [...document.querySelectorAll('button')]
            var index = btns.findIndex((item) => {
                return item == e.target;
            })
            console.log(index);
            // str2 += `
            //     <div class="shangpin">
            //         <div class="xinxi xuanze"><input type="checkbox"> </div>
            //         <div class="xinxi tu">${arr[index].id}</div>
            //         <div class="xinxi danjia">${arr[index].price}</div>
            //         <div class="xinxi shuliang">1</div>
            //         <div class="xinxi caozuo">删除</div>
            //     </div>
            // `
            // Cart.innerHTML = `<h2>购物车(${count})</h2> ${str2}`
            var p = document.createElement('p')
            p.innerHTML = `
                <div class="xinxi xuanze"><input type="checkbox"> </div>
                <div class="xinxi tu">${arr[index].id}</div>
                <div class="xinxi danjia">${arr[index].price}</div>
                <div class="xinxi shuliang">1</div>
                <div class="xinxi caozuo">删除</div>
            `
            Cart.appendChild(p)
        }
    }
</script>